// 数据加载出来前loading效果

import loadingSvg from '@/assets/loading.svg';
import styles from './Loading.module.less';

/**
 * 获取el下的元素
 * @param {DOM} el 
 */
function getImgDom(el) {
    return el.querySelector('img[data-rote=loading]');
}

/**
 * 
 * @returns 
 */
function createImg() {
    const img = document.createElement('img');
    img.src = loadingSvg;
    img.className = styles.loading;
    img.dataset.rote = 'loading';
    return img
}
export default function (el, binding) {
    const imgDom = getImgDom(el);
    if (binding.value) {
        if (!imgDom) {
            el.appendChild(createImg());
        }
    } else {
        if (imgDom) {
            imgDom.remove();
        }
    }
}